<template>
	<div class="data-right" v-if="viewModel.length > 0" v-loading="isloading">
		<div class="data_right-li">
			<h1 class="data_right-h1">{{getName(viewModel[0])}}</h1>
			<p class="data_right-p1 data_right-mar" v-if="viewModel[0].intro">{{viewModel[0].intro}}</p>
			<div class="p2-box">
				<div class="data_right-p2 data_right-mar">
					<div class="right-p2_tbox">
						<div class="right-p2_left">
							<span class="left-span1" v-if="viewModel[0].tableType == 1 || viewModel[0].tableType == 2">实体</span>
							<span class="left-span1 buts_1" v-if="viewModel[0].tableType == 3">AutoConfig</span>
							<span class="left-span1 buts_2" v-if="viewModel[0].tableType == 4">枚举</span>
							<span class="left-span1 buts_3" v-if="viewModel[0].tableType == 5 || viewModel[0].tableType == 6">级联</span>
							<span class="left-span2">{{viewModel[0].key}}</span>
							<span @click="copyTab(viewModel[0].key)"><i class="el-icon-document-copy"></i></span>
						</div>
					</div>
					<div class="right-p2_right" @click="collectClick"><i class="el-icon-star-off" :style="`color:${collectChange?'#f5a623;':''}`"></i>收藏</div>
				</div>
				<!-- <div class="data_right-p2">
        <div class="right-p2_left">
          <span class="left-span2">api/taskplan/modules</span>
          <span @click="copyTab('api/taskplan/modules')"><i class="el-icon-document-copy"></i></span>
          <span class="left-span3">生产环境</span>
        </div>
      </div> -->
			</div>
		</div>
		<div class="data_right-li">
			<h1 class="data_right-h2">响应参数</h1>
			<el-table :data="viewModel[0].columns" style="width: 100%" class="api-table">
				<el-table-column label="参数" width="200">
					<template slot-scope="scope">
						<span>{{ scope.row.key }} <i class="el-icon-document-copy" @click="copyTab(scope.row.key)"></i></span>
					</template>
				</el-table-column>
				<el-table-column label="类型" width="200">
					<template slot-scope="scope">
						<x-code>{{ scope.row.type }}</x-code>
					</template>
				</el-table-column>
				<el-table-column label="名称" width="200">
					<template slot-scope="scope">
						<span>{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="是否必填" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.isRequired }}</span>
					</template>
				</el-table-column>
				<el-table-column label="说明">
					<template slot-scope="scope">
						<span>{{ scope.row.intro }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="data_right-li">
			<h1 class="data_right-h2">敏捷调用</h1>
			<el-table :data="agileList" style="width: 100%" class="api-table" v-if="isAgile">
				<el-table-column label="方法名称">
					<template slot-scope="scope">
						<span>{{ scope.row.name }} <i class="el-icon-document-copy" @click="copyTab(scope.row.name)"></i></span>
					</template>
				</el-table-column>
				<el-table-column label="说明">
					<template slot-scope="scope">
						<span>{{ scope.row.explain }}</span>
					</template>
				</el-table-column>
				<el-table-column label="参考教程">
					<template slot-scope="scope">
						<span class="data_right-li-span" @click="windowClick(scope.row.course)"> 参考教程</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="data_right-li">
			<h1 class="data_right-h2">相关结构</h1>
		</div>

		<div v-for="(item, index) in viewModel" :key="index">
			<div class="data_right-li" v-if="index !== 0">
				<h1 class="data_right-h2">{{getName(item)}}</h1>
				<el-table :data="item.columns" style="width: 100%" class="api-table" v-if="isAgile">
					<el-table-column label="参数" width="200">
						<template slot-scope="scope">
							<span>{{ scope.row.key }} <i class="el-icon-document-copy" @click="copyTab(scope.row.key)"></i></span>
						</template>
					</el-table-column>
					<el-table-column label="类型" width="200">
						<template slot-scope="scope">
							<x-code>{{ scope.row.type }}</x-code>
						</template>
					</el-table-column>
					<el-table-column label="名称" width="200">
						<template slot-scope="scope">
							<span>{{ scope.row.name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="是否必填" width="150">
						<template slot-scope="scope">
							<span>{{ scope.row.isRequired }}</span>
						</template>
					</el-table-column>
					<el-table-column label="说明">
						<template slot-scope="scope">
							<span>{{ scope.row.intro }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

	</div>
</template>
<script>
	import ala from '@/service/ala'
	export default {
		data() {
			return {
				tableData: [{
					date: 'direction',
					intro: '设置分割线方向'
				}, {
					date: 'direction',
					intro: '设置分割线方向'
				}],
				tabIndex: 0,
				viewModel: [],
				collectChange: false, // 是否收藏
				actType: '',
				agileList: [],
				isAgile: false,
				isloading: true
			}
		},
		methods: {
			async init(data) {
				this.actType = data.type
				this.widget = data
				this.isAgile = false
				this.viewModel = await ala.httpGet('Api/Develop/Data?type=' + data.type)
				this.$nextTick(() => {
					this.agileList.forEach((element, index) => {
						if (element.name) {
							element.name = element.name.replace('{{key}}', this.viewModel[0].key)
							this.$set(this.agileList, index, element)
						}
					})
					this.isAgile = true
				})
				ala.get('DevelopCollect', {
					way: 1,
					key: data.type
				}).then(res => {
					if (res.id) this.collectChange = true
					else this.collectChange = false
				})
				this.isloading = false
			},
			async copyTab(val) {
				var textArea = document.createElement('textarea')
				var elementID = 'cp_hgz_input'
				textArea.setAttribute('id', elementID)
				textArea.value = val
				document.body.appendChild(textArea)
				document.getElementById(elementID).select()
				var successful = document.execCommand('copy')
				var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板'
				document.getElementById(elementID).remove()
				this.$message({
					message: msg,
					type: 'success'
				})
			},
			// 跳转链接
			windowClick(url) {
				window.open(url)
			},
			// 收藏
			async collectClick() {
				let para = {
					type: this.widget.type,
					id: this.widget.id,
					name: this.widget.name,
					key: this.widget.type,
					way: 1
				}
				if (this.collectChange) {
					ala.del('DevelopCollect', para).then(res => {
						if (res.status === 1) {
							this.collectChange = false
							this.$message.success(`${para.type}取消收藏`)
							this.$emit('collect')
						}
					})
				} else {
					ala.add('DevelopCollect', para).then(res => {
						if (res.id) {
							this.$message.success(`${para.type}收藏成功`)
							this.collectChange = true
							this.$emit('collect')
						}
					})
				}
			},
			getName(item) {
				if (item.name) {
					if (item.name === item.key) return item.name
					else {
						return `${item.name}(${item.key})`
					}
				} else {
					return item.key
				}
			}
		}
	}
</script>
<style lang="scss">
	@import "./data-right.scss";
</style>